<template>
  <div>
    <cKeynote class="keynote" :list="list"></cKeynote>
    <cTextCont class="textcont" :list="list" ></cTextCont>
  </div>
</template>
<script>
import cKeynote from '@/components/files/keynote.vue'
import cTextCont from '@/components/files/textCont.vue'
import hljs from 'highlight.js';

export default {
    name:'cont',
    components: {cKeynote,cTextCont},
    data(){
        return {
           list:[]
        }
    },
    watch:{
        "$route.path"(newVal){ // 监听路由变化, 获取对应的配置文件
          this.init(newVal)
        }
    },
   mounted() {
       this.init()
   },
   methods:{
       init(newVal){
           let dats=[]
           let urls=newVal||this.$route.path;
           let urlsName=urls.substr(urls.lastIndexOf('/'),urls.length-1);// /vue
           if(urls&&urls!='/about'){
             dats = require(`@/assets/json${urlsName}.js`)   //@/assets/json  +/vue.js
           }else{
             dats=[]
           }
            dats.forEach((v,i,arr)=>{
                arr[i].id=i+1;
            })
            this.list=dats;
            // console.log(this.list)
            setTimeout(() =>{
                let blocks = document.querySelectorAll('.c_cox pre code');
                blocks.forEach((block)=>{
                    hljs.highlightBlock(block)
                })
            }, 10)
        }
   }
}
</script>
<style scoped>
.keynote {
  width: 200px;
  padding: 20px 0 20px 10px;
  white-space: nowrap;
  position: absolute;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}
.textcont {
  margin-left: 200px;
  overflow-y: auto;
  padding: 0 20px 0 30px;
}
</style>